<template>
    <div class="main_box">
        <div class="add_wrap">
            <div class="tit">
                <h2>{{ $route.query.id ? '编 辑 商 户 号' : '新 增 商 户 号' }}</h2>
                <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList"> 返
                    回</el-button>
            </div>
            <el-form :model="dataForm" ref="dataForm" label-width="200px" :rules="roleRules">
                <el-row>
                    <el-form-item label="商户号名称" prop="mchName">
                        <el-input v-model.trim="dataForm.mchName" placeholder="请输入商户号名称" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="商户号Id" prop="mchId">
                        <el-input v-model.trim="dataForm.mchId" placeholder="请输入商户号Id" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="公司名称" prop="company">
                        <el-input v-model.trim="dataForm.company" placeholder="请输入公司名称" clearable filterable></el-input>
                    </el-form-item>
                    <el-form-item label="医检机构" prop="institutionId">
                        <el-select placeholder="请选择医检机构" v-model="dataForm.institutionId" clearable filterable
                            size="medium">
                            <el-option v-for="item in institutionList" :key="item.id" :label="item.label"
                                :value="item.value">

                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="API密钥" prop="mchPrivateKey">
                        <el-input v-model.trim="dataForm.mchPrivateKey" placeholder="请输入API密钥"></el-input>
                    </el-form-item>
                    <el-form-item label="备注" prop="remark">
                        <el-input type="textarea" v-model.trim="dataForm.remark"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item>
                        <el-button plain type="primary" @click="sureClick">保 存</el-button>
                        <el-button plain @click="returnList">取 消</el-button>
                    </el-form-item>
                </el-row>
            </el-form>
        </div>
    </div>
</template>
  
<script>
import * as message from "@/constants/message";
import MerchantNoApi from "@/api/finance/merchantNo"
import InstitutionApi from "@/api/institution/institution";
export default {
    name: 'BoxAdd',
    data() {
        return {
            dataForm: {
                mchId:"", //这个是需要填写的
                mchInfoId: "",
                company: "",
                institutionId: "",
                mchName: "",
                mchPrivateKey: "",
                remark: "",
            },
            institutionList: [],
            roleRules: {
                mchName: [
                    { required: true, message: "请输入商户号", trigger: "blur" }
                ],
                mchId: [
                    { required: true, message: "请输入商户号ID", trigger: "blur" }
                ],
                company: [
                    { required: true, message: "请填写公司名称", trigger: "blur" }
                ],
                mchPrivateKey: [
                    { required: true, message: "请输入API密钥", trigger: "blur" }
                ]
            }
        }
    },
    mounted() {
        this.init()
    },
    components: {

    },
    methods: {
        init() {
            this.listInstitution()
            if (this.$route.query.id) {
                this.dataForm.mchInfoId = this.$route.query.id;
                this.getData(this.$route.query.id);
            }
        },

        getData(val) {
            MerchantNoApi.getMerchantNoInfo({ id: val })
                .then(res => {
                    this.$Utils.bindingBean(this.dataForm, res.data);
                })
        },
        listInstitution() {
            let _this = this;
            InstitutionApi.selectInsByUser()
                .then(res => {
                    _this.institutionList = res.data.map(item => {
                        return {
                            value: item.institutionId,
                            label: item.institutionName
                        };
                    });

                    console.log( _this.institutionList)
                })
                .catch(error => {
                    _this.institutionList = [];
                    console.error(error);
                });
        },
        sureClick() {
            // 提交
            this.$refs.dataForm.validate(valid => {
                if (valid) {
                    this.$confirm(message.MSG_CONFIRM_SAVE, message.TITLE_PROMPT, {})
                        .then(() => {
                            if (this.dataForm.mchInfoId) {
                                this.editData();
                            } else {
                                this.addData();
                            }
                        });
                }
            })
        },
        addData() {
            // 新增
            var cond = {
                mchId:this.dataForm.mchId,
                company: this.dataForm.company,
                institutionId: this.dataForm.institutionId,
                mchName: this.dataForm.mchName,
                mchPrivateKey: this.dataForm.mchPrivateKey,
                remark: this.dataForm.remark,
            }
            MerchantNoApi.addMerchantNo(cond)
                .then(data => {
                    this.$Utils.notifySuccess();
                    this.returnList();
                })
        },
        editData() {
            // 编辑
            var cond = {
                mchInfoId: this.dataForm.mchInfoId,
                mchId:this.dataForm.mchId,
                company: this.dataForm.company,
                institutionId: this.dataForm.institutionId,
                mchName: this.dataForm.mchName,
                mchPrivateKey: this.dataForm.mchPrivateKey,
                remark: this.dataForm.remark,
            }
            MerchantNoApi.editMerchantNo(cond)
                .then(data => {
                    this.$Utils.notifySuccess();
                    this.returnList();
                })
        },
        //  返回
        returnList() {
            this.dataForm = [];
            this.$store.dispatch('delView', this.$route);
            this.$router.push({ path: '/finance/merchantNoManagement' });
        }
    }
}
</script>
<style lang="scss" src="@/assets/css/views/add.scss" scope>

</style>
  <!-- <style lang="scss" src="@/assets/css/views/add.scss" scope> -->
  <!-- </style> -->
  